<template>
  <!-- 声明横线 -->
  <div class="text-sm text-gray-700 dark:text-gray-300 space-y-4 mt-6">
    <div class="flex items-center">
      <div class="flex-1 border-t border-dashed border-gray-400 dark:border-gray-600"></div>
      <div class="w-14 h-4 mx-2 rounded bg-gray-300 dark:bg-gray-600 animate-pulse"></div>
      <div class="flex-1 border-t border-dashed border-gray-400 dark:border-gray-600"></div>
    </div>
  </div>

  <!-- 版权信息骨架 -->
  <div
    class="space-y-4 border border-dashed border-gray-400 dark:border-gray-600 rounded-lg p-4 sm:p-6 mt-6 text-sm"
  >
    <div class="h-4 w-1/2 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
    <div class="h-4 w-5/6 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
    <div class="h-4 w-4/5 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
  </div>

  <!-- 分类标签骨架 -->
  <div class="flex justify-between items-center mt-4 px-2">
    <div class="w-24 h-6 rounded-lg bg-gray-200 dark:bg-gray-700 animate-pulse"></div>
    <div class="flex items-center gap-2">
      <div class="w-4 h-4 rounded-full bg-gray-300 dark:bg-gray-600 animate-pulse"></div>
      <div class="w-12 h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
    </div>
  </div>

  <!-- 标签列表骨架 -->
  <div class="flex flex-wrap gap-2 mt-4 px-2">
    <div
      v-for="n in 3"
      :key="n"
      class="w-20 h-6 rounded-lg bg-gray-200 dark:bg-gray-700 animate-pulse"
    ></div>
  </div>
</template>
